<!--
 * @Author: Lzx
 * @Date: 2022-04-22 13:24:10
 * @LastEditors: Lzx
 * @LastEditTime: 2022-11-10 01:43:17
 * @FilePath: /web-vue/src/pages/Housing/detail.vue
 * @Description: 房间详情
-->
<template>
  <div class="loading-layer">
    <el-page-header @back="() => $router.push('/Housing')" content="详情页面">
    </el-page-header>
    <el-row v-if="hosueObj" class="data-table row-panel row-panel-first">
      <el-card>
        <!-- 轮播图 -->
        <el-col :span="11">
          <el-carousel>
            <el-carousel-item v-for="(url, index) in hosueObj.houseImagesUrl" :key="index">
              <el-image :src="`${$store.state.API_ROOT}${url}`"
                :preview-src-list="[`${$store.state.API_ROOT}${url}`]"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <!-- 描述信息 -->
        <el-col :span="12" :offset="1">
          <el-tag type="danger">优惠价</el-tag>
          <el-descriptions class="margin-top" title="" :column="2" size="medium">
            <template slot="extra">
              <el-button v-if="hosueObj.houseStatus === 2" class="button" type="primary" icon="el-icon-s-home"
                @click="$refs.orderAdd.openAddForm(true, hosueObj)">立即预定
              </el-button>
              <el-button v-else class="button" type="danger" icon="el-icon-circle-close" disabled>不可预定
              </el-button>
            </template>
            <el-descriptions-item label="房价/天">
              <el-link type="danger" :underline="false">￥ {{ hosueObj.cost }}</el-link>
            </el-descriptions-item>
            <el-descriptions-item label="折扣">
              <el-link type="warning" :underline="false">{{ hosueObj.discount }}</el-link>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :title="hosueObj.houseTitle" :column="2">
            <el-descriptions-item label="房型">
              <template v-for="(item, index) in $store.state.DICT.houseTypeSelect">
                <el-tag v-if="item.code === hosueObj.houseType" :key="index" :type="item.theme">
                  {{ item.name }}
                </el-tag>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label="配套">{{
              hosueObj.provide
            }}</el-descriptions-item>
            <el-descriptions-item label="地区">
              <el-cascader v-model="hosueObj.regionId" :options="$store.state.DICT.regionCode" :props="{
                expandTrigger: 'hover',
                checkStrictly: true,
                emitPath: false,
                value: 'id',
                label: 'name',
              }" size="mini" disabled>
              </el-cascader>
            </el-descriptions-item>
            <el-descriptions-item label="具体位置">{{
              hosueObj.detailLocation
            }}</el-descriptions-item>
            <el-descriptions-item label="入住要求">{{
              hosueObj.command
            }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-card>
    </el-row>
    <el-row class="data-table row-panel">
      <el-col>
        <el-card>
          <el-tabs type="card">
            <el-tab-pane label="房间详情">
              <Detail v-if="hosueObj" :obj="hosueObj"></Detail>
            </el-tab-pane>
            <!-- 租客评价列表 -->
            <el-tab-pane label="租客评价">
              <el-collapse :accordion="false">
                <el-collapse-item v-for="(item, index) in appraiseList" :key="index">
                  <template slot="title">
                    <el-image class="el-icon-lzx" :src="`${$store.state.API_ROOT}${item.avatar}`" :preview-src-list="[
                      `${$store.state.API_ROOT}${item.avatar}`,
                    ]">
                    </el-image>
                    <el-link type="" :underline="false">
                      &nbsp;&nbsp;{{ item.createUserName }}
                    </el-link>
                    <el-link type="info" :underline="false">
                      &nbsp;&nbsp;{{ item.updateTime }}
                    </el-link>
                  </template>
                  <el-rate v-model="item.starMark" show-text text-color="#ff9900"
                    :texts="['差评', '一般般', '不错', '满意', '非常满意']" :colors="{
                      1: '#99A9BF',
                      2: '#f0d186',
                      3: '#f7cb62',
                      4: '#F7BA2A',
                      5: '#FF9900',
                    }" disabled>
                  </el-rate>
                  <p>
                    <el-link type="warning" :underline="false">
                      {{ item.appraise }}</el-link>
                  </p>
                  <el-link type="danger" :underline="false">
                    房东回复：{{ item.reply }}</el-link>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加租房订单表单 -->
    <OrderAdd ref="orderAdd" @afterSubmit="() => $router.push('/Order')"></OrderAdd>
  </div>
</template>

<script>
import Detail from "@/views/House/detail";
import OrderAdd from "@/views/HousingOrder/addForm";
export default {
  name: "housingDetail",

  components: {
    Detail,
    OrderAdd,
  },

  data() {
    return {
      houseId: null,
      hosueObj: null,
      appraiseList: [],
    };
  },

  // 组件活跃时执行
  activated() {
    // 获取路由传递的参数
    this.houseId = this.$route.params.id;
    // 初始化查询
    this.queryHouseApi();
    this.queryHouseAppraise();
  },

  methods: {
    // 查询【房源】API
    queryHouseApi() {
      const loading = this.$loading({
        target: document.querySelector(".loading-layer"),
        lock: true,
        text: "正在加载，请耐心等待！",
      });

      this.$api
        .queryOneHouse(this.houseId)
        .then((res) => {
          console.log(res);
          loading.close();
          let { status, message, data } = res.data;
          if (status == 200) {
            this.hosueObj = data;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【房源】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => { },
            });
          }
        })
        .catch((err) => {
          loading.close();
          console.log(`【房源】查询接口发生错误: ${err}`);
        });
    },

    // 查询租户评价列表
    queryHouseAppraise() {
      let param = {
        houseId: this.houseId,
        orderStatus: 6,
        pageSize: 1000,
      };

      this.$api
        .queryHousingOrderApparise(param)
        .then((res) => {
          this.appraiseList = [];

          let { status, message, data } = res.data;
          if (status == 200) {
            this.appraiseList = data.items;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【租客评价】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => { },
            });
          }
        })
        .catch((err) => {
          console.log(`【租客评价】查询接口发生错误: ${err}`);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";

.el-icon-lzx {
  border-radius: 50%;
  height: 33px;
}
</style>
